Nedbank Design System

Our aim is to have a single site where new and existing clients can browse and manage all their financial requirements, securely. This site will have tailored content and will promote consistent brand engagement.

The goal is firstly, to reduce the friction that users currently experience when interacting with the brand and, secondly, to allow us to deliver a superior product that meets the user’s every need.

This is our North Star, as a collective we align to it to ensure that we deliver the best experience for our customers.

Nedbank Design System 2019

Building the Nedbank Design System was an ongoing project

My role

I was assigned as the Design Systems full time UX/UI resource. Our team consisted of 3 UX/UI Designers, 4 Front-end Developers and a Creative Director.

Project Summary

The bank was on a drive to digital transformation. With that the bank had invested in various initiatives, which resulted in various teams being born each with its own mission of taking the old manual processes which did not serve the customers nor the business and transforming them into digital, secure, profitable and most of all useful features and services.

The Problem

Nedbank Design had only a handful of designers, manually sharing files and duplicating components which led to inconsistent and fragments experiences. The team was rapidly growing and the bank was in need of a design system as its source of truth.

Creating a Design System | Phase 1

Setting up the foundations of the Design System.

• Who would use our Design System? Design and Engineering but soon enough it would be a resource or the whole organisation. One Design Language

• Who would be the stakeholders represented our Design System?

Nedbank Brand and Marketing, UX Writing, Design and Engineering

• What was the core value to our users? Our Design System would create a cohesive design experience in the bank and free up time and budget for squads to design, test and iterate quickly and constantly.

Setting up and Onboarding Designers and Developers.

At the very start we decided to create sections in the Design System for easy onboarding and setting up. With these pages designers and engineers could know which tools they need, how to set them up and how to get working easily. This page also served as a reference to other designers and engineers to visit again in case they needed it.

Designer

Engineer

Structuring Components

We created a library of elements, components and templates for designers to have the right tools with which to design.

The process was:

A complete Component Audit. We gathered various design files from designers all over the bank and had a look at all the components, layouts and styles used across all the products as everything was extremely fragmented.

We interviewed designers to find out what their pain points were, where they got their last design file from, why certain decisions were made and who allowed for it. What was their current team dynamic and how it influenced their work and creative output?

We interviewed engineers to find out what their pain points were. Did they have a central repository to work from? Were there multiple versions of the same page or component coded? Was there a coding standard? We noticed the same components being coded by various teams across various engineering houses.

Creating a Design System | Phase 2

Next I was teamed up with a fellow UX designer and together we did another round of interviews with designers and engineers, but this time with the intention of learning about them, what they stand for, what they were working on, and lastly their way of working.

We created a set of Principles for Design. http://design.nedbank.co.za/docs/principles/design.html

Core principles

Based on the bank’s vision and mission and understanding of customer needs, the design team created design principles.

• Know who you’re designing for

• Deliver a consistent, unified experience

• Design with modules

• Build the right product for the right people

Design principles

Principles enable designers and developers to speak the same language during idea generation and quality checking of designs.

• Provide feedback in context

• Display secondary content independently

• Show users only what’s necessary

• Prevention is better than cure

• Help users recover from errors

• Edit in context

• Provide a sense of control

Design Process

We revisited all the internal processes with an experience mindset how can we make our designers and engineers have great working experience as they were in high pressured situations with tight deadlines and budgets.

Usability Rules http://design.nedbank.co.za/docs/components/alert-block.html

Working with Golden standards and a lot of research and help from highly accredited sources, we set about creating UX rules and guidelines for every component with recommendations of what would deliver the best experience to the user when using the banking product.

We also included behavioural rules for each component to ensure that the feedback the user gets is correct for the task he is trying to complete. We wanted to make sure that every aspect of a seamless experience is ensured.

Designer and Engineer feedback process.

Weekly Cuddle Huddles (Mandatory Friday morning design meetings) were held to discuss what design and engineering working on and give feedback on was working and what was not, and where we could help.

We also gave design and engineering the opportunity to take the stage and talk through problems they have experienced, what methods they used to find a solution and how the solution might help other designers and engineers.

We wanted designers to participate and contribute in the Design System, as it was for everyone. We created a submission process to the Design System team for those who came up with great solutions which could help others facing similar problems. If they designed an enhancement to a component or template which they have tested, they had the platform to add it.

We wanted the Design System to be all inclusive, whether you work on the Product Team or Design System team.

Working with Engineers.

I worked closely with a team of Front-End engineers who coded our Design System components and made them available for other wider engineering teams to use.

• Assisting engineers while coding each element and component. The feedback it gave to the user and the styling of the component with accessibility in mind. Our components where coded in Angular

• Assisting them with their interaction with offshore engineering teams - We had various teams based in India and Poland and the local group had a rough time keeping up with the workload and interacting with the product engineers offshore.

• Assisting also with interactions with designers, when designers and engineers were not on the same page. Many times, there would be a misunderstanding and listening to both parties and creating a common platform was beneficial.

• Reviewing of product screens once they have been designed and coded before going into production based off the guidelines created in the design documentation.

Creating a Design System | Phase 3

I joined the product team. This way I could use the Design System as a product designer and feedback problems and observations back to the design system team.

___________________________________________________________________________________

Please be advised due to the sensitive nature of the work and respect for my previous employer I am not going into detail on the projects but rather discussing my role and process while in the position.

Thank you for your time.